<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style type="text/css">
        p{border: #f00}
        p.dotted{border-style:dotted; }
        p.dashed{border-style:dashed; }
        p.solid{border-style:solid; }
        p.double{border-style:double; }
        p.groove{border-style:groove; }
        p.ridge{border-style:ridge; }
        p.inset{border-style:inset; }
        p.outset{border-style:outset; }
    </style>
</head>
<body>
<p class="dotted">点状</p>
<p class="dashed">虚线</p>
<p class="solid">实线</p>
<p class="double">双线</p>
<p class="groove">3D凹槽</p>
<p class="ridge">3D垄状</p>
<p class="inset">3D inset</p>
<p class="outset">3D outset</p>
</body>
</html>